<template>
	<u-swiper
		@tap="tapBanner"
		keyName="image"
		:list="val.list"
		@click="swiperClick"
		@change="e => (current = e.current)"
		:autoplay="autoplay"
		circular
		:height="val.height"
		:radius="val.radius"
	>
		<view slot="indicator" :class="['indicator', type === 'details' ? 'details_swiper_position' : '']">
			<view class="indicator__dot" v-for="(item, index) in val.list" :key="index" :class="[index === current && 'indicator__dot--active']"></view>
		</view>
	</u-swiper>
</template>

<script>
export default {
	props: {
		val: {
			type: Object,
			default: () => ({})
		},
		type: {
			type: String,
			default: ''
		},
		autoplay: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			current: 0
		};
	},
	methods: {
		tapBanner() {
			this.$emit('choose', this.current);
		},
		swiperClick(val) {
			console.log(val, '点击事件');
			this.$emit('swiperClick', val);
		}
	}
};
</script>

<style lang="scss">
.indicator {
	@include flex(row);
	justify-content: center;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			width: 16px;
			background-color: #ffffff;
		}
	}
}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}

.details_swiper_position {
	position: absolute;
	bottom: 80rpx;
	transform: translate(-50%);
	left: 50%;
}
</style>
